/*
 * @Author: hongbin
 * @Date: 2021-12-31 18:24:13
 * @LastEditors: hongbin
 * @LastEditTime: 2022-01-04 18:42:42
 * @Description:主页
 */
import { FC, ReactElement } from "react";
import styled from "styled-components";
import AreaStackGradient from "../charts/AreaStackGradient";
import PieCustom from "../charts/PieCustom";
import BubbleGradient from "../charts/BubbleGradient";
import MixTimelineFinance from "../charts/MixTimelineFinance";
import ChinaMap from "../charts/ChinaMap";

interface IProps {}

const Home: FC<IProps> = (): ReactElement => {
  return (
    <Container>
      <main>
        <aside>
          <AreaStackGradient />
          <PieCustom />
        </aside>
        <main>
          <ChinaMap />
        </main>
        <aside>
          <BubbleGradient />
          <MixTimelineFinance />
        </aside>
      </main>
    </Container>
  );
};

export default Home;

const Container = styled.div`
  main {
    width: 100vw;
    height: calc(100vh - var(--header-height, 10vh));
    display: flex;
    position: relative;

    aside {
      width: 30vw;
      height: inherit;
      /* background-color: #faaaaa22; */
      z-index: ${props => props.theme.index.up};
    }
    aside:last-child {
      position: absolute;
      right: 0;
    }
    main {
      width: inherit;
      height: inherit;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
`;
